<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="css/mui.css" rel="stylesheet" />
	<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
	<link rel="stylesheet" type="text/css" href="css/common.css"/>
	<link rel="stylesheet" type="text/css" href="css/search.css"/>
</head>

<body>
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">垃圾分类</h1>
	</header>
	<section>
		<h1>搜索匹配</h1>
		<div class="search-input">
			<form action="" onsubmit="return false" id="formSearch">
				<input autofocus="autofocus" id="input-val" type="search" placeholder="请输入"/>
			</form>
		</div>
	</section>
	<section class="search-list">
		<div class="search-hot">
			<h3>热门搜索</h3>
			<ul id="hotSearch"></ul>
		</div>
		<div class="search-history">
			<h3>搜索历史</h3>
			<ul class="mui-table-view" id="historyList">
				
			</ul>
		</div>
	</section>
</body>
<script src="js/flexible.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mui.js"></script>
<script type="text/javascript">
	mui.init()
	mui.plusReady(function () {
		var sHtmlL='';
		fGetrStorage()
	    // 设置状态栏样式
		plus.navigator.setStatusBarBackground('#f7f7f7');
		plus.navigator.setStatusBarStyle('dark');
		 // 热门搜索
		mui.ajax('http://apis.juhe.cn/rubbish/hotSearch',{
		 data:{
			 key:'dfe7a5dc90a9be32d35d15d5a06eb619'
		 },
		 success:function(data){
			var result = data.result
			mui.each(result,function(index,item){
				document.querySelector('#hotSearch').innerHTML+=`
				<li data-title=${item.itemName}>${item.itemName}</li>
				`
			})
		 }
		}) 
		// 点击热门搜索区块，进行跳转
		mui('#hotSearch').on('tap','li',function(){
			fOpenWindow(this.getAttribute('data-title'))
		 })
		// 点击搜索
		mui('.search-input').on('keypress','#formSearch',function(e){
			if(e.keyCode == 13){
				// 打开新页面
				fOpenWindow(document.querySelector('#input-val').value)
			}
		})
		
		// 封装跳转函数
		function fOpenWindow(val){
			mui.openWindow({
				url: 'detail.html',
				id: 'detail',
				extras:{
					title:encodeURI(val)
				},
				show:{
					autoShow: true,
					title:'加载中'
				}
			})
			fSetStorage(val)
			fGetrStorage()
		}
		
		// 本地存储==》读取操作
		function fGetrStorage(){
			var storage = localStorage
			if(!storage.getItem('historySearch')){
				storage.setItem('historySearch','[]')
			}
			var arr = JSON.parse(storage.getItem('historySearch'))
			mui.each(arr,function(index,item){
				sHtmlL+=`
				<li class="mui-table-view-cell" data-title="${item}">
					<a class="mui-navigate-right">
						<p>
							<i class="iconfont icon-shijian"></i>
							${item}
						</p>
					</a>
				</li>`
			})
			
			document.querySelector('.mui-table-view').innerHTML = sHtmlL
		}
		// 本地存储==》设置操作
		function fSetStorage(val){
			sHtmlL=''
			var arr = JSON.parse(localStorage.getItem('historySearch'))
			
			var arrFillter = arr.filter(function(item){
				return item.indexOf(val)<0
			})
			
			arrFillter.unshift(val)
			localStorage.setItem('historySearch',JSON.stringify(arrFillter))
		}
		// 点击搜索历史跳转
		mui('#historyList').on('tap','li',function(){
			var dataTitle = this.getAttribute('data-title')
			fOpenWindow(dataTitle)
		})
	 })
</script>
</html>
